<template>
  <div>
    <!--查询-->
    <div>
      <label v-if="isShowArea">区域查询：</label>
      <el-select v-model="selectCity"  placeholder="请选择区域" style="width: 200px" v-if="isShowArea">
        <el-option
          v-for="item in cityInfo"
          :key="item.cityId"
          :label="item.cityName"
          :value="item.cityName">
        </el-option>
      </el-select>
      <el-button type="success" round v-if="isShowArea" @click="areaResult(selectCity)">搜索</el-button>
      <label style="margin-left: 10px">店铺查询：</label>
      <el-select v-model="selectShop"  placeholder="请选择店铺" style="width: 300px">
        <el-option
          v-for="item in shopInfo"
          :key="item.shopId"
          :label="item.chain"
          :value="item.chain">
        </el-option>
      </el-select>
      <el-button type="success" round @click="shopResult(selectShop)">搜索</el-button>
      <el-button round @click="isAddEmpDialog = true" v-if="isShowAdd">新增员工</el-button>
    </div>

    <!--表格-->
    <div style="margin-top: 20px">
      <el-table
        :data="info"
        style="width: 100%; padding: 10px 20px 20px 20px;"
        v-loading="loading"
        height="518"
      size="small">
        <el-table-column
          prop="empId"
          label="ID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="empName"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="empSex"
          label="性别"
          width="50">
        </el-table-column>
        <el-table-column
          prop="empHiredate"
          label="入职日期"
          width="100">
        </el-table-column>
        <el-table-column
          prop="empShop"
          label="店铺"
          width="150">
        </el-table-column>
        <el-table-column
          prop="empCity"
          label="城市">
        </el-table-column>
        <el-table-column
          prop="empPosition"
          label="职位 / 部门"
          width="100">
        </el-table-column>
        <el-table-column
          prop="empTel"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle size="small" @click="editEmp(scope.row)" v-if="isShowEdit"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delEmp(scope.row)" v-if="isShowDel"></el-button>
            <el-button type="danger" round size="small" v-if="!isShowEdit && !isShowDel">无权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--添加新员工-->
    <el-dialog title="添加新员工" :visible.sync="isAddEmpDialog" top="60px" v-if="isShowAdd">
      <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
        <el-form label-width="80px" :model="emp">
          <el-form-item label="姓名">
            <el-input v-model="emp.empName" ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="emp.empSex"></el-input>
          </el-form-item>
          <el-form-item label="入职时间">
            <el-date-picker v-model="emp.empHiredate" type="date" style="width: 420px"></el-date-picker>
          </el-form-item>
          <el-form-item label="店铺">
            <el-select v-model="emp.empShop"  placeholder="请选择店铺" style="width: 420px" @change="changeEmpShop">
              <el-option
                v-for="item in shopInfo"
                :key="item.shopId"
                :label="item.chain"
                :value="item.chain">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市">
            <!--<el-input v-model="emp.empCity"></el-input>-->
            <el-select v-model="emp.empCity"  placeholder="请选择城市" style="width: 420px" @change="changeEmpPosition">
              <el-option
                v-for="item in cityInfo"
                :key="item.cityId"
                :label="item.cityName"
                :value="item.cityName"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位/部门">
            <!--<el-input v-model="emp.empPosition"></el-input>-->
            <el-select v-model="emp.empPosition"  placeholder="请选择职位/部门" style="width: 420px">
              <el-option
                v-for="item in positionDefaultInfo"
                :key="item.positionId"
                :label="item.positionName"
                :value="item.positionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="emp.empTel" type="tel" maxlength="11" oninput ="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitChangeEmp(emp,'add')">添加</el-button>
            <el-button @click="onSubmitCancelEmp('add')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!--编辑新员工-->
    <el-dialog title="修改新员工" :visible.sync="isEditEmpDialog" top="30px" v-if="isShowEdit">
      <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
        <el-form label-width="80px" :model="emp">
          <el-form-item label="ID">
            <el-input v-model="emp.empId" readonly></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="emp.empName" ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="emp.empSex"></el-input>
          </el-form-item>
          <el-form-item label="入职时间">
            <el-date-picker v-model="emp.empHiredate" type="date" style="width: 420px"></el-date-picker>
          </el-form-item>
          <el-form-item label="店铺">
            <el-select v-model="emp.empShop"  placeholder="请选择店铺" style="width: 420px" @change="changeEmpShop">
              <el-option
                v-for="item in shopInfo"
                :key="item.shopId"
                :label="item.chain"
                :value="item.chain">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市">
            <!--<el-input v-model="emp.empCity"></el-input>-->
            <el-select v-model="emp.empCity"  placeholder="请选择城市" style="width: 420px" @change="changeEmpPosition">
              <el-option
                v-for="item in cityInfo"
                :key="item.cityId"
                :label="item.cityName"
                :value="item.cityName"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位/部门">
            <!--<el-input v-model="emp.empPosition"></el-input>-->
            <el-select v-model="emp.empPosition"  placeholder="请选择职位/部门" style="width: 420px">
              <el-option
                v-for="item in positionDefaultInfo"
                :key="item.positionId"
                :label="item.positionName"
                :value="item.positionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="emp.empTel" type="tel" maxlength="11" oninput ="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitChangeEmp(emp,'edit')">添加</el-button>
            <el-button @click="onSubmitCancelEmp('edit')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "EmpIndex",
      beforeRouteEnter(to, form, next){
        next(vm => {
          setTimeout(function () {
            vm.loading = false;
          },1500)
          // 当数据请求过程中，会进行2秒的加载动画
        });
      },
      mounted() {
        // this.info = this.empInfo;
        this.getEmpInfo("总部");
        this.getShopInfo();
        this.getHqPosition();
        this.getRcPosition();
      },
      data() {
        return {
          // 权限
          isShowAdd: false, // 根据权限显示添加按钮
          isShowEdit: false, // 根据权限显示编辑按钮
          isShowDel: false, // 根据权限显示删除按钮
          isShowArea: false, // 根据权限显示搜索框

          // 城市信息
          selectCity: '总部',
          cityInfo:[
            {cityId: '00', cityName: '总部', disabled: false},
            {cityId: '01', cityName: '成都市'},
            {cityId: '02', cityName: '绵阳市'},
            {cityId: '03', cityName: '自贡市'},
            {cityId: '04', cityName: '攀枝花市'},
            {cityId: '05', cityName: '泸州市'},
            {cityId: '06', cityName: '德阳市'},
            {cityId: '07', cityName: '广元市'},
            {cityId: '08', cityName: '遂宁市'},
            {cityId: '09', cityName: '内江市'},
            {cityId: '10', cityName: '乐山市'},
            {cityId: '11', cityName: '资阳市'},
            {cityId: '12', cityName: '宜宾市'},
            {cityId: '13', cityName: '南充市'},
            {cityId: '14', cityName: '达州市'},
            {cityId: '15', cityName: '雅安市'},
            {cityId: '16', cityName: '阿坝藏族羌族自治州'},
            {cityId: '17', cityName: '甘孜藏族自治州'},
            {cityId: '18', cityName: '凉山彝族自治州'},
            {cityId: '19', cityName: '广安市'},
            {cityId: '20', cityName: '巴中市'},
            {cityId: '21', cityName: '眉山市'}
          ],

          // 部门/职位信息
          // 总部部门/职位
          positionHQInfo: [],
          // 分店职位
          positionChainInfo: [],
          positionDefaultInfo: [],

          // 分店信息
          selectShop: '',
          shopInfo: [],


          // 根据搜索结果查询的所有员工信息
          empInfo:[],

          info: [],
          loading : true,

          // 单个员工信息
          emp: {
            empId: '',
            empName: '',
            empSex: '',
            empHiredate: '',
            empShop: '',
            empCity: '',
            empPosition: '',
            empTel: ''
          },
          // 添加新员工弹框
          isAddEmpDialog: false,
         // 编辑员工弹框
          isEditEmpDialog: false,

        };
      },
      methods: {
          // 根据区域搜索
        areaResult(item){
          let infos = [];
          this.empInfo.forEach(v=>{
            if(v.empCity == item){
              let vote = {};
              vote.empId = v.empId;
              vote.empName = v.empName;
              vote.empSex = v.empSex;
              vote.empHiredate = v.empHiredate;
              vote.empShop = v.empShop;
              vote.empCity = v.empCity;
              vote.empPosition = v.empPosition;
              vote.empTel = v.empTel;
              infos.push(vote);
            }
          });
          this.info = infos;
          // this.selectCity
        },

        // 根据店铺搜索
        shopResult(item){
          let infos = [];
          this.empInfo.forEach(v=>{
            if(v.empShop == item){
              let vote = {};
              vote.empId = v.empId;
              vote.empName = v.empName;
              vote.empSex = v.empSex;
              vote.empHiredate = v.empHiredate;
              vote.empShop = v.empShop;
              vote.empCity = v.empCity;
              vote.empPosition = v.empPosition;
              vote.empTel = v.empTel;
              infos.push(vote);
            }
          });
          this.info = infos;
          //this.selectShop
        },

        // 获取权限
        getPower(){

        },

        // 获取店铺名称、店长信息
        getShopInfo(){
          this.axios.get('/api/shopinfo').then((response)=>{
            if(response.data.statusCode == "200"){
              let infos = [];
              infos.push({
                shopId: '20200703230001',
                chain: '宠达总部'
              });
              response.data.data.forEach(v=>{
                let vote = {};
                vote.shopId = v.shopId;
                vote.chain = v.chain;
                infos.push(vote);
              })
              this.shopInfo = infos;
            }
          })
        },

        // 获取总部职位
        getHqPosition(){
          this.axios.get('/api/dep').then((response)=>{
            if(response.data.statusCode == "200"){
              this.positionHQInfo = response.data.data;
            }
          })
        },

        // 获取分店职位
        getRcPosition(){
          this.axios.get('/api/rc').then((response)=>{
            this.positionChainInfo = response.data.data;
          })
        },

        // 获取所有员工信息
        getEmpInfo(city){
          axios.post("/api/check",{passID: sessionStorage.getItem('passID')}).then((response)=> {
            if (response.data.statusCode == "200") {
              this.isShowAdd = response.data.data.isShowAdd; // 添加权限
              this.isShowEdit = response.data.data.isShowEdit; // 编辑权限
              this.isShowDel = response.data.data.isShowDel; // 删除权限
              this.isShowArea = response.data.data.isShowArea; // 店铺城市搜索框权限
            }
          });
          this.axios.get('/api/emp').then((response)=>{
            if(response.data.statusCode == "200"){
              this.empInfo = response.data.data;
              this.getHqEmpInfo(city);
              this.loading=false;
            }
          })
        },

        // 默认显示总部员工信息
        getHqEmpInfo(city){
          let i = [];
          this.empInfo.forEach(v=>{
            if(v.empCity == city){
              let vote = {};
              vote.empId = v.empId;
              vote.empName = v.empName;
              vote.empSex = v.empSex;
              vote.empHiredate = v.empHiredate;
              vote.empShop = v.empShop;
              vote.empCity = v.empCity;
              vote.empPosition = v.empPosition;
              vote.empTel = v.empTel;
              i.push(vote);
            }
          });
          this.info = i;
        },

        // 选择店铺为宠达总部，城市自动填充为总部
        changeEmpShop(){
          if(this.emp.empShop == '宠达总部'){
            this.emp.empCity = '总部';
            this.changeEmpPosition();
          }else {
            this.emp.empCity = '';
            this.emp.empPosition = '';
            this.changeEmpPosition();
          }
        },
        // 动态显示员工职位选项
        changeEmpPosition(){
          if(this.emp.empCity == '总部'){
            this.emp.empPosition = '';
            this.cityInfo.forEach(v=>{
              if(v.cityId == '00'){
                v.disabled = false;
                return;
              }
            });
            this.positionDefaultInfo = this.positionHQInfo;
          }else {
            this.emp.empPosition = '';
            this.cityInfo.forEach(v=>{
              if(v.cityId == '00'){
                v.disabled = true;
                return;
              }
            });
            this.positionDefaultInfo = this.positionChainInfo;
          }
        },

        // 清除员工信息
        clearEmp(){
          this.emp = {
            empId: '',
            empName: '',
            empSex: '',
            empHiredate: '',
            empShop: '',
            empCity: '',
            empPosition: '',
            empTel: ''
          };
        },

        // 添加/编辑员工
        onSubmitChangeEmp(v, attribute){
          if(!this.verification(v)){
            this.$message({
              message: '员工信息填写有误！',
              center: true,
              type: 'error'
            });
          }else {
            var date = new Date(v.empHiredate);
            v.empHiredate = new Date(date.setDate(date.getDate()+1));
            if(attribute == 'add'){
              this.axios({
                url: '/api/emp',
                method: "post",
                data: JSON.stringify(v),
                headers:{
                  'Content-Type': 'application/json; charset=utf-8'
                }
              }).then((response)=>{
                if(response.data.statusCode == "200"){
                  this.$message({
                    message: '员工信息添加成功！',
                    center: true,
                    type: 'success'
                  });
                  this.getEmpInfo(v.empCity);
                }else {
                  this.$message({
                    message: '员工信息添加失败！',
                    center: true,
                    type: 'error'
                  });
                }
              })
            }else if(attribute == 'edit'){
              this.axios({
                url: '/api/emp',
                method: "put",
                data: JSON.stringify(v),
                headers:{
                  'Content-Type': 'application/json; charset=utf-8'
                }
              }).then((response)=>{
                if(response.data.statusCode == "200"){
                  this.$message({
                    message: '员工信息修改成功！',
                    center: true,
                    type: 'success'
                  });
                  this.getEmpInfo(v.empCity);
                }else {
                  this.$message({
                    message: '员工信息修改失败！',
                    center: true,
                    type: 'error'
                  });
                }
              })
            }
            this.clearEmp();
            this.isAddEmpDialog = false;
            this.isEditEmpDialog = false;
          }
        },

        // 取消员工
        onSubmitCancelEmp(attribute){
          if(attribute == 'add'){
            this.$message({
              message: '已取消添加新员工信息操作！',
              center: true,
              type: 'info'
            });
          }else if(attribute == 'edit'){
            this.$message({
              message: '已取消修改员工信息操作！',
              center: true,
              type: 'info'
            });
          }
          this.clearEmp();
          this.isAddEmpDialog = false;
          this.isEditEmpDialog = false;
        },

        // 编辑员工弹框显示
        editEmp(v){
          this.isEditEmpDialog = true;
          this.emp = {
            empId: v.empId,
            empName: v.empName,
            empSex: v.empSex,
            empHiredate: v.empHiredate,
            empShop: v.empShop,
            empCity: v.empCity,
            empPosition: v.empPosition,
            empTel: v.empTel
          };
        },

        // 删除员工信息
        delEmp(v){
          this.$confirm('此操作将永久删除该员工信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.delete('/api/emp',{params:{empId:v.empId}}).then((response)=>{
              if(response.data.statusCode == "200"){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '删除失败!请稍后尝试。'
                });
              }
              this.getEmpInfo(v.empCity);
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除!'
            });
          });
        },

        verification(v){
          let S = /^\s*$/;
          let space = new RegExp(S);

          var myDate = new Date();
          var now = myDate.valueOf();
          var time = new Date(v.empHiredate).valueOf();

          if (v.empTel == '' ||
            v.empPosition == '' ||
            v.empCity == '' ||
            v.empShop == '' ||
            v.empHiredate == '' ||
            v.empSex == '' ||
            v.empName == '' ||
            v.empTel.match(space) ||
            v.empName.match(space) ||
            v.empSex.match(space)){
            return false;
          }
          if (v.empSex == "男" && now > time){
            return true;
          }
          if (v.empSex == "女" && now > time){
            return true;
          }
          return false;
        }
      }
    }
</script>

<style scoped>

</style>
